<template>
	<view class="container">
		<view class="header">
			<image src="@/static/image 12.png" mode=""></image>

			<view class="">优果会员</view>
			<view class="member-code">会员编码：00001</view>
		</view>
		<view class="user-info">
			<view class="user_card"></view>
			<view class="user_card"></view>
		</view>
		<view class="content">
			<view class="contentTitle">
				<h3>优果会员积分:</h3>
				<view class="">
					2024
				</view>
			</view>
			<view class="counts">
				<view class="count-item">
					<text class="count">6</text>
					<text class="label">收藏</text>
				</view>
				<view class="count-item">
					<text class="count">126</text>
					<text class="label">历史浏览</text>
				</view>
				<view class="count-item">
					<text class="count">5</text>
					<text class="label">优惠卡券</text>
				</view>
				<view class="count-item">
					<text class="count">98</text>
					<text class="label">购买记录</text>
				</view>
			</view>
			<view class="contentTitle">
				<h3>我的订单</h3>
			</view>
			<view class="my-orders">

				<view class="order-options">
					<view class="myORder">
						<view class="">

						</view>
						<view class="">待付款</view>
					</view>
					<view class="myORder">
						<view class="">

						</view>
						<view class="">待发货</view>
					</view>
					<view class="myORder">
						<view class="">

						</view>
						<view class="">待收获</view>
					</view>
					<view class="myORder">
						<view class="">

						</view>
						<view class="">自提</view>
					</view>
					<view class="myORder">
						<view class="">

						</view>
						<view class="">售后</view>
					</view>

				</view>
			</view>

		</view>

		<view class="footer">
			<view class="contentTitle">
				<h3>我的服务</h3>
			</view>
			<view class="my-services">
				<view class="services">
					<image src="" class="services_img"></image>
					<text>极速秒达</text>
				</view>
				<view class="services">
					<text>门店暂存</text>
				</view>
				<view class="services">
					<text>贺卡礼盒</text>
				</view>
				<view class="services">
					<text>全国配送</text>
				</view>
				<view class="services">
					<text>评价反馈</text>
				</view>
				<view class="services">
					<text>礼品卡</text>
				</view>
				<view class="services">
					<text>学生有礼</text>
				</view>
				<view class="services">
					<text>试吃中心</text>
				</view>
				<view class="services">
					<text>收货地址</text>
				</view>
				<view class="services">
					<text>福利中心</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			viewAllOrders() {
				// 查看全部订单的逻辑
			}
		}
	}
</script>
<style>
	.container {
		font-family: Arial, sans-serif;
		margin: 0 auto;
		width: 100vw;
		background: linear-gradient(to bottom, #FFF0BA 5%, #ffffff 100%);
	}

	.header {
		width:690rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin: 0 auto 40rpx;
		box-sizing: border-box;
	}

	.header image {
		width: 124rpx;
		height: 124rpx;
		float: left;
	}

	.time {
		font-size: 36rpx;
		color: #333;
	}

	.status-icons {
		/* 图标样式 */
	}

	.user-info {
		width: 690rpx;
		height: 170rpx;
		margin: 0 auto;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.user_card{
		width: 47%;
		height: 100%;
		background-color: aqua;
		display: inline-block;
		border-radius: 22rpx;
	}

	.member-code {
		font-size: 28rpx;
		color: #666;
	}



	.content {
		height: 422rpx;
		width: 690rpx;
		margin: 40rpx auto;
		background: linear-gradient(to bottom, #FFEBDB 20%, #ffffff 20%);
	}

	.contentTitle {
		margin-left: 33rpx;
		display: flex;
		align-items: center;
		height: 86rpx;
	}

	.counts {
		display: flex;
		justify-content: space-around;
		padding: 40rpx;
	}

	.count-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.count {
		font-size: 36rpx;
		color: #333;
	}

	.label {
		font-size: 28rpx;
		color: #666;
	}

	.my-orders {
		background-color: #fff;
		height: 80rpx;
		text-align: center;
	}

	.order-options {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.footer {
		width: 690rpx;
		margin: 40rpx auto 0;
		background: linear-gradient(to bottom, #FFE7D1 6%, #fff );
	}

	.my-services {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 40rpx;
		background-color: #fff;
	}

	.services{
		width: 112rpx;
		height: 112rpx;
		margin: 20rpx 0rpx;
		font-size: 15rpx;
		color: #333;
		box-sizing: border-box;
		background-color: #FFF0BA;
		padding: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.my-services text {
		text-align: center;
		width: 100%;
	}
	.services_img{
		width: 62rpx;
		height: 62rpx;
		background-color: pink;
	}
</style>